<template>
	<view>
		<!-- 分享 -->
		<popupBox ref="share" type="bottom" :isSlot="true">
			<view class="shareBox">
				<view class="title">
					<text>分享到</text>
					<!-- <image src="@/static/image/login_1.png" @click="$refs.share.close()" mode="widthFix"></image> -->
				</view>
				<view class="box">
					<view class="item" @click="shareClick('WXSceneSession')">
						<image :src="$img_path('/course/classify/1.png')" mode="widthFix"></image>
						<text>微信好友</text>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share"></button>
						<!-- #endif -->
					</view>
					<view class="item" @click="shareClick('WXSceneTimeline')">
						<image :src="$img_path('/course/classify/2.png')" mode="widthFix"></image>
						<text>朋友圈</text>
					</view>
					<view class="item" @click="createdImg">
						<image :src="$img_path('course/classify/3.png')" mode="widthFix"></image>
						<text>生成海报</text>
					</view>
				</view>
				<view class="btn">
					<button @click="$refs.share.close()">取消</button>
				</view>
			</view>
		</popupBox>

		<!-- 海报弹窗 -->
		<popupBox ref="haibao" type="bottom" customClass="hbpopup" :isSlot="true">
			<view class="haibao">
				<view class="canvas_content">
					<image :src="canvas_img_url" mode="widthFix"></image>
				</view>

				<view class="shareBox hb_b">
					<view class="title">
						<text>分享当前图片到</text>
						<!-- <image src="@/static/image/login_1.png" @click="$refs.haibao.close()" mode="widthFix"></image> -->
					</view>
					<view class="box">
						<view class="item" @click="saveCanvasImg()">
							<image :src="$img_path('course/classify/4.png')" mode="widthFix"></image>
							<text>保存图片</text>
						</view>
						<view class="item" @click="shareClick('WXSceneSession')">
							<image :src="$img_path('/course/classify/1.png')" mode="widthFix"></image>
							<text>微信好友</text>
							<!-- #ifdef MP-WEIXIN -->
							<button open-type="share"></button>
							<!-- #endif -->
						</view>
						<view class="item" @click="shareClick('WXSceneTimeline')">
							<image :src="$img_path('/course/classify/2.png')" mode="widthFix"></image>
							<text>朋友圈</text>
						</view>
					</view>
					<view class="btn">
						<button @click="$refs.haibao.close()">取消</button>
					</view>
				</view>
			</view>
		</popupBox>
		<view class="jiantou" v-if="pengyouquan" @click="pengyouquan = false">
			<image :style="{'top':5+'px','right':jWidth+'px'}"
				:src="$img_path('/course/jian.png')" mode="widthFix"></image>
			<view class="text">
				请点击这里
			</view>
		</view>
		<canvas canvas-id="offlineCanvas" style="width: 634px;height: 968px;position: fixed;z-index: -1;opacity: 0;background-color: #FFFFFF;"></canvas>
	</view>
</template>

<script>
	import popupBox from '@/components/popup/popup.vue';
		import canvas_img from '@/utils/canvas_img';
	export default {
		components: {
			popupBox
		},
		data() {
			return {
				canvas_img_url: "",
				pengyouquan: false,
				jWidth:this.jWidth-30,
			};
		},
		methods: {
			open() {
				this.$refs.share.open()
			},

			close() {
				this.$refs.share.close()
			},

			confirm() {
				this.$emit("confirm")
			},

			shareClick(text) {
				if (text == 'WXSceneTimeline') {
					this.pengyouquan = true
				}
			},

			// 生成海报
			createdImg() {
				canvas_img.initCanvas('offlineCanvas', this, {
					url: this.$img_path('/course/uni.png')
				}).then(res => {
					uni.canvasToTempFilePath({
						canvasId: 'offlineCanvas',
						success: (res) => {
							console.log(res)
							this.canvas_img_url = res.tempFilePath
							this.$refs.haibao.open()
						}
					})
				})
			},

			saveCanvasImg() {
				uni.saveImageToPhotosAlbum({
					filePath: this.canvas_img_url,
					success: function(res) {
						var savedFilePath = res.savedFilePath;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shareBox {
		padding: 40rpx 0 0;
		background: #F5F5F5;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 30rpx;
				top: 0;
			}
		}

		.box {
			padding: 70rpx 30rpx 38rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				display: flex;
				flex-direction: column;

				image {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					margin-top: 20rpx;
					text-align: center;
				}

				position: relative;

				button {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					opacity: 0;
				}
			}
		}

		&.coupon {
			background-color: #FFFFFF;
		}

		.coupon-box {
			padding: 70rpx 30rpx 38rpx;

			.item {
				width: 100%;
				height: 186rpx;
				position: relative;

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				&>image.bg {
					width: 100%;
					height: 100%;
				}

				.c_num {
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: center;

					.price {
						font-weight: bold;
						font-size: 48rpx;
						color: #FD845C;
						line-height: 66rpx;

						text {
							font-size: 30rpx;
						}
					}

					&>text {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 8rpx;
					}
				}

				.c_info {
					position: absolute;
					left: 204rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.xz {
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						line-height: 32rpx;
					}

					.c_box {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 6rpx;
					}

					.time {
						font-weight: 400;
						font-size: 20rpx;
						color: #FF575B;
						line-height: 28rpx;
						margin-top: 18rpx;
					}
				}

				.checkImg {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 116rpx;
					height: 48rpx;
				}

			}
		}


		.btn {
			padding: 20rpx 30rpx;
			// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
			// background: #FFFFFF;

			button {
				width: 100%;
				height: 96rpx;
				background: linear-gradient(90deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}

	.haibao {
		.canvas_content {
			width: 520rpx;
			height: auto;
			background: #FFFFFF;
			box-sizing: border-box;
			// background-color: #F5F5F5;
			border-radius: 20rpx;
			margin: 0 auto 32rpx;

			&>image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.hb_b {
			background-color: #F5F5F5;
			border-radius: 16rpx 16rpx 0 0;

			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));
		}
	}
	.jiantou{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top:0;
		left: 0;
		z-index: 999999;
		image{
			width: 300rpx;
			height: 400rpx;
			position: absolute;
		}
		view{
			position: absolute;
			top: 500rpx;
			right: 300rpx;
			color: #FF0000;
			font-size: 48rpx;
			font-weight: bold;
		}
	}
	
	/deep/ .hbpopup{
		background-color: transparent !important;
		padding-bottom: 0 !important;
	}
</style>